﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:v="clr-namespace:Twilight.Views"
    xmlns:vm="clr-namespace:Twilight.ViewModels"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:controls="clr-namespace:Twilight.Controls"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="Twilight.Views.TinyView"
	Width="194" Height="114">
    <UserControl.Resources>
        <vm:RotatingViewModel x:Key="tweetData" d:IsDataSource="True" />
    </UserControl.Resources>
    <Canvas Background="Transparent" DataContext="{Binding Mode=OneWay, Source={StaticResource tweetData}}">
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="LoadStates">
                <vsm:VisualState x:Name="Loading" />
                <vsm:VisualState x:Name="Loaded">
                    <Storyboard />
                </vsm:VisualState>
            </vsm:VisualStateGroup>
            <vsm:VisualStateGroup x:Name="TweetViewStates">
                <vsm:VisualState x:Name="Hidden">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="tweetCanvas"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0.0"/>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY">
                            <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.25" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Shown">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tweetCanvas"
                                     Storyboard.TargetProperty="Opacity">
                            <DiscreteDoubleKeyFrame Value="1.0" KeyTime="0:0:0" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleX"
                                     To="1.0"/>
                        <DoubleAnimation Storyboard.TargetName="scaleTx"
                                     Storyboard.TargetProperty="ScaleY"
                                     To="1.0"/>
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0:0:0.25"/>
                </vsm:VisualStateGroup.Transitions>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
        <Grid x:Name="LayoutRoot" Background="#FFD2E9F8" Width="88" Height="26">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1" />
                <ColumnDefinition Width="2" />
                <ColumnDefinition Width="1"/>
                <ColumnDefinition Width="35"/>
                <ColumnDefinition Width="1"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="1" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1" />
                <RowDefinition Height="2" />
                <RowDefinition Height="1"/>
                <RowDefinition Height="11"/>
                <RowDefinition Height="1"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="1" />
            </Grid.RowDefinitions>
            <Rectangle Fill="#FFCCCCCC" Grid.Row="0" Grid.ColumnSpan="7" />
            <Rectangle Fill="#FFCCCCCC" Grid.Row="1" Grid.RowSpan="6" Grid.Column="0" />
            <Rectangle Fill="#FF8A8A8A" Grid.Row="1" Grid.Column="6" Grid.RowSpan="5" />
            <Rectangle Fill="#FF8A8A8A" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="6" />
            <Rectangle Fill="#FF8A8A8A" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" />
            <Rectangle Fill="#FF8A8A8A" Grid.Row="3" Grid.Column="2" Grid.RowSpan="2" />
            <Rectangle Fill="#FFCCCCCC" Grid.Row="3" Grid.Column="4" />
            <Rectangle Fill="#FFCCCCCC" Grid.Row="4" Grid.Column="3" Grid.ColumnSpan="2" />
            <Rectangle Fill="White" Grid.Row="3" Grid.Column="3" />
            <TextBlock Grid.Row="3" Grid.Column="3" Text="{Binding FollowCount}" FontSize="9" Foreground="#FF666666" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <TextBlock Grid.Row="3" Grid.Column="5" Text="followers" FontSize="10" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FF666666" />
            <HyperlinkButton Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="5" NavigateUri="{Binding FollowUri}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="9" Margin="0,-2,0,0">
                <TextBlock Text="{Binding Path=Username}" Padding="0" Margin="0" />
            </HyperlinkButton>
        </Grid>
        <controls:BubbleTweet Canvas.Top="26" x:Name="tweetCanvas" DataContext="{Binding CurrentTweet}">
            <controls:BubbleTweet.RenderTransform>
                <ScaleTransform x:Name="scaleTx" CenterX="22" CenterY="-7" ScaleX="0" ScaleY="0" />
            </controls:BubbleTweet.RenderTransform>
        </controls:BubbleTweet>
    </Canvas>
</UserControl>